import rrwebPlayer from "rrweb-player"
import "rrweb-player/dist/style.css"
import styles from "./index.module.scss"

import React, { useRef, useState } from "react"
import FullscreenModal from "@/components/FullscreenModal"
const rrweb = require("rrweb")

function ReplayDemo() {
    const [isPlaying, setIsPlaying] = useState(false)
    const videoRef = useRef<any>()
    const [isModalVisible, setIsModalVisible] = useState(false)

    let stopFn: (() => void) | null = null
    let replayInstance: any = null
    const events: any = []

    const start = () => {
        stopFn = rrweb.record({
            emit(event: any) {
                // 将 event 存入 events 数组中
                events.push(event)
            }
        })
    }

    const replay = () => {
        setIsModalVisible(true)
        if (stopFn) {
            stopFn() // 调用 stopFn 停止录制
        } else {
            console.error("stopFn is not a function")
        }
        setIsPlaying(true)
        setTimeout(() => {
            if (videoRef.current) {
                if (replayInstance) {
                    return
                }

                replayInstance = new rrwebPlayer({
                    target: videoRef.current, // 可以自定义 DOM 元素
                    // 配置项
                    props: {
                        events
                    }
                })
            }
        }, 1)
    }
    return (
        <div className={styles.App}>
            <div className="btn-wrap">
                <button onClick={() => start()}>开始录制</button>
                <button onClick={() => replay()}>回放</button>
            </div>
            <div className="textArea-wrap">
                <textarea rows={10} cols={50}>
                    这里是一个文本输入框
                </textarea>
            </div>
            {/* <Modal width="900px" destroyOnClose footer={null} open={isModalVisible} onCancel={() => setIsModalVisible(false)}>
                {isPlaying ? <div id="replay" ref={videoRef} /> : null}
            </Modal> */}
            {/* <div ref={videoRef} style={{ width: "100%", height: "100%" }}></div> */}
            {/* <Modal title="录屏回放" open={isModalVisible} className={styles.customModal} onCancel={() => setIsModalVisible(false)} footer={null} destroyOnClose>
                <div
                    ref={videoRef}
                    style={{
                        width: "500px",
                        height: "400px"
                    }}
                />
            </Modal> */}
            <FullscreenModal
                isOpen={isModalVisible}
                title="全屏模态框"
                onClose={() => setIsModalVisible(false)}
                closeOnEscape={true}
                closeOnOutsideClick={true}
            >
                <div style={{ display: "flex", justifyContent: "center", alignItems: "center", paddingTop: "-24px" }} ref={videoRef} />
            </FullscreenModal>
        </div>
    )
}

export default ReplayDemo
